<template>
  <div class="tenant-organizations template-body">
    <div class="detail-box ccui-clearfix">
      <!-- 左侧页面展示 -->
      <div class="detail-info">
        <!-- 插入内容展示 -->
        <slot></slot>
      </div>

      <!--  右边审批状态  -->
      <approval-read-record
        v-if="isTrue"
        :approvalRecordData="activities"
      ></approval-read-record>
    </div>
  </div>
</template>

<script>
import approvalReadRecord from "@/basa/components/public/approvalRecord.vue";
import { listWfcRecord } from "./../apis";
export default {
  name: "approvalReturnChangeDetails",
  components: {
    approvalReadRecord
  },
  props: ["id"],
  data() {
    return {
      activities: [],
      isTrue: false
    };
  },
  activated() {
    this.listWfcRecord(this.id);
  },
  created() {
    this.listWfcRecord(this.id);
  },
  methods: {
    // 数据获取
    listWfcRecord(id) {
      listWfcRecord({ id }).then(res => {
        if (res.data.code === "0") this.activities = res.data.data;
        this.isTrue = true;
      });
    }
  },
  beforeRouteLeave(to, from, next) {
    this.isTrue = false;
  }
};
</script>

<style scoped lang="scss">
.detail-info {
  width: calc(100% - 438px);
  min-height: calc(100vh - 260px);
  float: left;
  background: #fff;
  position: relative;
  padding: 14px 20px 0 20px;
  margin: 15px 0 80px;
}
/deep/.el-table td,
.el-table th {
  padding: 0 0;
  height: 36px;
}
/deep/.el-col-13 {
  width: 79%;
}

/deep/.detail-info-el-Label {
  position: absolute;
  width: 107px;
  right: 50px;
  top: 31px;
  z-index: 1;
}

.el-none {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
.relationRight {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 5px;
}
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}
/deep/
  .ccui-multifunctional-table-wrapper
  .el-table
  tbody
  tr
  td:first-child
  .cell {
  border-right: 1px solid #f1f1f1;
}
/deep/ .el-table__footer-wrapper {
  margin-top: 0px;
}

// 解决表格定位滚动条无法拖动
/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}
/deep/ .el-table__fixed,
/deep/.el-table__fixed-right {
  pointer-events: none;
  td {
    pointer-events: auto;
  }
}
</style>
